<template>
  <div class="knowledge-page flex-col">
    <div class="nav-bar-box" :style="{height: (statusH + titleH) + 'px'}">
      <div class="nav-bar">
        <div class="nav-status" :style="{height:statusH + 'px'}"></div>
        <div class="nav-head flex-row-v-center" :style="{height:titleH + 'px'}">
          <div class="search-box flex-row-center" style="height: 30px;" @click="onClickGoSearch">
            <img src="/static/assets/img/icon/icon-search.png"/>
            <span style="font-size: 12px;">搜索疾病知识</span>
          </div>
        </div>
      </div>
    </div>

    <scroll-view class="knowledge-container flex-1" scroll-y @scrolltolower="getNextList">
      <div class="clear-10"></div>
      <div class="knowledge-holder">
        <div class="swiper-box" v-if="bannerList.length > 0">
          <Swiper :images="bannerList"/>
        </div>

        <div class="article-box">
          <div class="article-item flex-row" v-for="post in postList" :key="post.id" @click="goToPostDetail(post.id)">
            <div class="cover-img flex-center">
              <img :src="post.cover_img_url" mode="widthFix"/>
            </div>
            <div class="right flex-col">
              <div class="title">{{ post.title }}</div>
              <div class="desc">{{ post.content }}</div>
              <div class="tip">
                <img src="/static/assets/img/whzs/icon-eye.png"/>
                {{post.views}}已看
              </div>
            </div>
          </div>
        </div>

        <div class="flex-center tip-txt" v-if="noMoreDataStatus">没有更多了</div>
      </div>
    </scroll-view>

    <div class="customer-service-box" @click="onTapServiceCall">
      <img src="/static/assets/img/whzs/icon-kf.png"/>
      <button open-type="contact" class="contact-btn"></button>
    </div>
  </div>
</template>

<script>
  import global from 'global'
  import Core from 'core'
  import Common from 'common'
  import Swiper from '@/components/swiper'

  export default {
    components: { Swiper },
    data () {
      return {
        statusH: global.state.statusH,
        titleH: global.state.titleH,
        navBarHeight: global.state.statusH + global.state.titleH,

        noMoreDataStatus: false,

        currentPage: 1,
        totalPage: 1,
        postList: [],
        bannerList: []
      }
    },

    onLoad () {
      this._getPostList('', this.currentPage)
    },

    onShow () {
      this.currentPage = 1
      this._getPostList('', this.currentPage)
      this._getConfigDetail()
    },

    methods: {
      onClickGoSearch () {
        Common.go(`/pages/搜索/main`)
      },

      getNextList () {
        if (this.currentPage >= this.totalPage) {
          return
        }

        this.currentPage++
        this._getPostList('', this.currentPage)
      },

      goToPostDetail (postId) {
        Common.go(`/pages/疾病知识/详情/main?post_id=${postId}`)
      },

      _getConfigDetail () {
        let hospitalId = Common.getHospitalId()
        Core.Api.Config.detail(hospitalId, '3', '2').then(res => {
          this.bannerList = JSON.parse(res.config.value)
          console.log(this.bannerList)
        })
      },

      _getPostList (label, page = 1) {
        wx.showLoading({ title: '获取中' })
        Core.Api.Post.postList(label, page)
          .then(res => {
            let postList = res.post_list
            postList.forEach(v => {
              v.processCreateTime = Core.Util.timeFormat(v.create_time, 'Y-m-d')
              v.content = Core.Util.getNoHtmlText(v.content, 25)
            })

            if (page === 1) {
              this.postList = res.post_list
            } else {
              this.postList = this.postList.concat(res.post_list)
            }

            this.currentPage = page
            this.totalPage = Math.ceil(res.count / 10)
            if (this.totalPage === 0 || this.totalPage === this.currentPage) {
              this.noMoreDataStatus = true
            }

            wx.hideLoading()
          })
          .catch(err => {
            console.log(err)
            wx.hideLoading()
          })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .knowledge-page {
    width: 100%;
    height: 100%;
    overflow: hidden;

    .nav-bar-box {
      position: relative;
      width: 100%;
      background-color: #ffffff;
    }

    .nav-bar {
      position: fixed;
      width: 100%;
      top: 0;
      .nav-status {
        width: 100%;
      }

      .nav-head {
        width: 100%;
        color: #000000;
        padding: 0 12px;
        .search-box {
          width: 215px;
          border-radius: 15px;
          background-color: #FBFBFB;
          img {
            width: 14px;
            height: 15px;
            margin-right: 8px;
          }
          span {
            font-size: 13px;
            color: #afafaf;
          }
        }
      }
    }

    .clear-10 {
      background-color: rgb(243, 242, 243);
    }

    .knowledge-container {
      height: 100%;
      overflow-y: auto;
      box-sizing: border-box;
      background: #ffffff;
      .knowledge-holder {
        padding: 12px 12px 0 12px;
        .article-box {
          .article-item {
            padding: 20px 6px;
            border-bottom: 1px solid rgba(0, 0, 0, 0.07);
            &:last-child {
              border-bottom: none;
            }
            .cover-img {
              width: 116px;
              height: 96px;
              margin-right: 15px;
              background: #ffffff;
              img {
                width: 116px;
                height: 96px;
              }
            }
            .right {
              .title {
                font-size: 16px;
                font-weight: 500;
                color: rgba(49, 49, 49, 1);
                line-height: 21px;
              }
              .desc, .tip {
                margin-top: 14px;
                font-size: 14px;
                line-height: 14px;
                color: rgba(147, 147, 147, 1);
              }
              .tip {
                img {
                  width: 20px;
                  height: 11px;
                  margin-right: 6px;
                }
              }
            }
          }
        }
      }
    }

    .customer-service-box {
      position: fixed;
      bottom: 24px;
      right: 12px;
      width: 73px;
      height: 73px;
      img {
        width: 73px;
        height: 73px;
      }
      .contact-btn {
        position: absolute;
        opacity: 0;
        top: 0;
        left: 0;
        width: 73px;
        height: 73px;
      }
    }
  }
</style>
